<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script>
			//页面加载事件
			$(function(){
				//给所有的button绑定单击事件
				$("button").click(function(){
					//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
					$(this).css("color","red");//给当前的触发对象添加一个css
				});
				//给所有的超链接绑定鼠标移上事件
				$("a").mouseover(function(){
					var str=$(this).html();/*获取当前元素内所有内容*/
					$(this).html("鼠标移上-"+str);/*给当前元素设置内容，等价于js的innerHTML*/
				});
				//给所有的超链接绑定鼠标移出事件
				$("a").mouseout(function(){
					var str=$(this).html();
					$(this).html(str.substr(5));
				});
				$("a").hover(function(){
					$(this).css("color","red");/*给当前元素设置样式*/
				});
			});
		</script>
	</head>
<body>
	<a href="#">首页</a>  
	<a href="#">零食</a>  更多事件方法参考jQuery的事件方法
	<a href="#">鲜花</a>  
	<button type="button">普通按钮1</button>
	<button type="button">普通按钮2</button>
	<button type="button">普通按钮3</button>
</body>
</html>
